---
import Layout from "@layouts/Layout.astro";
import Footer from "@components/react/UI/Footer.astro";
import Tag from "@components/react/UI/Tag.astro";
import Datetime from "@components/react/UI/Datetime";
import type { CollectionEntry } from "astro:content";
import { slugifyStr } from "@utils/slugify";

export interface Props {
  post: CollectionEntry<"blog">;
}

const { post } = Astro.props;

const { title, author, description, ogImage, canonicalURL, pubDatetime, tags } = post.data;

const { Content, remarkPluginFrontmatter  } = await post.render();

const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
  .href;
---

<Layout activeNav="posts" title={title} author={author} description={description} ogImage={ogUrl} canonicalURL={canonicalURL}>
  <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
    <button
      class="focus-outline mb-2 mt-8 flex hover:opacity-75"
      onclick="
      history.back()
      "
    >
      <svg xmlns="http://www.w3.org/2000/svg"
        ><path
          d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
        ></path>
      </svg><span>返</span>
    </button>
  </div>
  <main data-barba="container" data-barba-namespace="home" id="main-content">
    <h1 class="post-title">{title}</h1>
    <Datetime datetime={pubDatetime} size="lg" className="my-2" />
     <div class="flex flex-wrap gap-4 text-sm justify-end">
        <span>
            预计阅读时长：{remarkPluginFrontmatter.minutesRead}
        </span>
        <span>
            字数：{remarkPluginFrontmatter.wordsRead}
        </span>
    </div>
    <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
      <Content />
    </article>

    <ul class="tags-container">
      {tags.map(tag => <Tag name={slugifyStr(tag)} />)}
    </ul>
    
   
  </main>

  <button
  type="button"
  data-te-ripple-init
  data-te-ripple-color="light"
  class="!fixed bottom-5 right-5 hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"
  id="btn-back-to-top">
  <svg
    aria-hidden="true"
    focusable="false"
    data-prefix="fas"
    class="h-4 w-4"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 448 512">
    <path
      fill="currentColor"
      d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path>
  </svg>
</button>
  
  <Footer />
</Layout>

 <script>
    //添加平滑滚动
    import Lenis from '@studio-freight/lenis';

    const lenis = new Lenis()
    function raf(time:any) {
        lenis.raf(time)
        requestAnimationFrame(raf)
    }
    requestAnimationFrame(raf)
  </script>

<script>
// back to top
import {
  Ripple,
  initTE,
} from "tw-elements";

initTE({ Ripple });

// Get the button
const mybutton = document.getElementById("btn-back-to-top");
if(mybutton){
const scrollFunction = () => {
  if (
    document.body.scrollTop > 20 ||
    document.documentElement.scrollTop > 20
  ) {
    mybutton.classList.remove("hidden");
  } else {
    mybutton.classList.add("hidden");
  }
};
const backToTop = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
};
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);
window.addEventListener("scroll", scrollFunction);
}
  </script>
<style>
  main {
    @apply mx-auto w-full max-w-3xl px-4 pb-12;
  }
  .post-title {
    @apply text-2xl font-semibold text-skin-accent;
  }
  .tags-container {
    @apply my-8;
  }
</style>


